<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      :title="dataList.SelectPeople"
      :append-to-body="true"
      align="center"
      class="base-dialog"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <!-- <el-input
              size="mini"
              placeholder="搜索部门"
              suffix-icon="el-icon-search"
              v-model="filterText"
            ></el-input> -->

            <el-card shadow="never" style="height: 200px">
              <div style="height: 200px; overflow: auto; padding-bottom: 20px">
                <el-tree
                  ref="tree"
                  class="filter-tree"
                  node-key="id"
                  :data="data"
                  :props="defaultProps"
                  :filter-node-method="filterNode"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
            </el-card>

            <el-card shadow="never" style="height: 200px">
              <div style="height: 200px; overflow: auto; padding-bottom: 20px">
                <el-row v-for="(item, index) in nodData" :key="index">
                  <div style="float: left">
                    <el-link
                      type="primary"
                      style="color: black"
                      @click="clickName(item)"
                    >
                      <i class="el-icon-s-custom"></i>
                      {{ item.name }}
                    </el-link>
                  </div>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="height: 400px">
              <div>
                <h2>{{ dataList.SelectedUser }}（{{ keyarr.length }}）</h2>
              </div>
              <div style="height: 380px; overflow: auto">
                <ul>
                  <el-row v-for="(item, index) in keyarr" :key="index">
                    <el-row>
                      <div style="float: left">
                        <i class="el-icon-s-custom"></i>
                        <span style="color: black">{{ item.name }} </span>

                        <i class="el-icon-close" @click="removeData(item)"></i>
                      </div>
                    </el-row>
                  </el-row>
                </ul>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="onSubmit">{{ btn.Confirm }}</el-button>
        <el-button @click="handleClose">{{ btn.Cancel }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { departmentTree } from "../../api/Permission/PermissionDepartment.js";
import { getUserList } from "../../api/Permission/PermissionUser.js";

export default {
  name: "ChoiceUserDialog",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    detectionPeopleIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name",
        id: "id",
      },
      keyarr: [],
      loading: true,
      data: [],
      nodData: [],
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  created() {
    departmentTree().then((res) => {
      this.data = res.data;
      this.loading = false;
    });
    if (
      this.detectionPeopleIdList !== null &&
      this.detectionPeopleIdList.length !== 0
    ) {
      getUserList({ idList: this.detectionPeopleIdList }).then((res) => {
        this.keyarr = res.data;
      });
    }
  },
  methods: {
    // 确定
    onSubmit() {
      this.$emit("choiceUser", this.keyarr);
      this.handleClose();
    },
    // 点击名称
    clickName(data) {
      for (let i = 0; i < this.keyarr.length; i++) {
        if (data.id === this.keyarr[i].id) {
          return false;
        }
      }
      this.keyarr.push({
        id: data.id,
        name: data.name,
      });
    },
    handleNodeClick(data, node) {
      if (data.userIdList !== null && data.userIdList.length !== 0) {
        getUserList({ idList: data.userIdList }).then((res) => {
          this.nodData = res.data;
        });
      }
    },
    removeData(data) {
      var checklist = this.keyarr;
      for (var i = 0; i < checklist.length; i++) {
        if (checklist[i].id === data.id) {
          checklist.splice(i, 1);
        }
      }
      this.keyarr = checklist;
    },
    handleClose() {
      this.$emit("update:dialogFormVisible", false);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
};
</script>
